<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用css3实现的页面平缓过渡效果</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>
	<div class="container">
		<div class="st-container">
			<input type="radio" name="radio-set" checked="checked" id="st-control-1">
			<a href="#st-panel-1">First</a>
			<input type="radio" name="radio-set" id="st-control-2">
			<a href="#st-panel-2">Second</a>
			<input type="radio" name="radio-set" id="st-control-3">
			<a href="#st-panel-3">Third</a>
			<input type="radio" name="radio-set" id="st-control-4">
			<a href="#st-panel-4">Fourth</a>
			<input type="radio" name="radio-set" id="st-control-5">
			<a href="#st-panel-5">Fifth</a>
			<div class="st-scroll">
				<section class="st-panel" id="st-panel-1">
					<div class="st-desc" data-icon="1">
					</div>
					<h2>First</h2>
					<p>I am the first one!</p>
				</section>

				<section class="st-panel st-color" id="st-panel-2">
					<div class="st-desc" data-icon="2">
					</div>
					<h2>Second</h2>
					<p>I am the second one!</p>
				</section>

				<section class="st-panel" id="st-panel-3">
					<div class="st-desc" data-icon="3">
					</div>
					<h2>Third</h2>
					<p>I am the third one!</p>
				</section>

				<section class="st-panel st-color" id="st-panel-4">
					<div class="st-desc" data-icon="4">
					</div>
					<h2>Fourth</h2>
					<p>I am the fourth one!</p>
				</section>

				<section class="st-panel" id="st-panel-5">
					<div class="st-desc" data-icon="5">
					</div>
					<h2>Fifth</h2>
					<p>I am the fifth one!</p>
				</section>
			</div>
		</div>

	</div>
</body>
</html>